.nova-color-picker-preset-wrap {
  grid-column: 1 / -1;
}

.nova-color-picker-preset-list {
  display: grid;
  grid-template: repeat(auto-fill, 20px) / repeat(auto-fill, 20px);
  grid-gap: 10px;
  margin: 20px 10px 10px 10px;
}

.nova-color-picker-preset {
  background-image: var(--nova-bg-checkerboard);
  background-color: var(--nova-color-bg);
  border-radius: var(--nova-radius-tiny);

  &:hover {
    .nova-color-picker-preset-inner {
      border: 1px solid var(--nova-color-font);
      box-shadow: inset 0 0 0 1px var(--nova-color-bg);
    }
  }

  &.nova-color-picker-preset-selected {
    .nova-color-picker-preset-inner {
      border: 2px solid var(--nova-color-font);
      box-shadow: inset 0 0 0 1px var(--nova-color-bg);
    }
  }
}

.nova-color-picker-preset-inner {
  border-radius: var(--nova-radius-tiny);
  height: 20px;
  transition: var(--nova-transition-component);
}
